<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
    <style>
        * {
            margin: 0; padding: 0;
        }

        #container {
            overflow: hidden;
            height: 500px;
            background: #edeae8;
            position: relative;
        }

        video {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="container">
    <video autoplay muted loop>
        <source src="http://ak4.picdn.net/shutterstock/videos/4170274/preview/stock-footage-beautiful-girl-lying-on-the-meadow-and-dreaming-enjoy-nature-close-up-slow-motion-footage.mp4" type="video/mp4">
    </video>
</div>
</body>
<script>
    var video = document.querySelector('video')
        , container = document.querySelector('#container');

    var setVideoDimensions = function () {
        // 获取视频本身的宽度和高度
        var w = video.videoWidth
            , h = video.videoHeight;

        // 获取视频的比例
        var videoRatio = (w / h).toFixed(2);

        // 获取容器的宽和高
        var containerStyles = window.getComputedStyle(container)
            , minW = parseInt( containerStyles.getPropertyValue('width') )
            , minH = parseInt( containerStyles.getPropertyValue('height') );

//计算和调整容器比例
        var widthRatio = minW / w
            , heightRatio = minH / h;

        //根据比例做调整
        if (widthRatio > heightRatio) {
            var newWidth = minW;
            var newHeight = Math.ceil( newWidth / videoRatio );
        }
        else {
            var newHeight = minH;
            var newWidth = Math.ceil( newHeight * videoRatio );
        }

        video.style.width = newWidth + 'px';
        video.style.height = newHeight + 'px';
    };

    video.addEventListener('loadedmetadata', setVideoDimensions, false);
    window.addEventListener('resize', setVideoDimensions, false);
</script>
</html>